<!--
  项目列表-项目卡片
  props：
    states array 项目状态列表 default：[
      { text: "新建", color: "#3385FF" },
      { text: "待审核", color: "#FFA029" },
      { text: "实施中", color: "#05CD8A" },
      { text: "审核拒绝", color: "#FE5555" }
    ]
    state number 项目状态，对应项目状态列表下标， default：0
    number string 项目编号
    date string 日期
    title string 标题
    customer string 合作客户
-->
<template>
  <div class="project-wrapper" :style="varStyle">
    <f7-card class="project-card">
      <f7-card-content class="project-card-content">
        <div class="create-box">
          <span class="create-time">创建&nbsp;&nbsp;{{date}}</span>
          <div class="status">{{projectState.text}}</div>
        </div>
        <div class="project-number">
          <van-tag color="rgba(52, 133, 255, .1)" text-color="#3385FF">{{number}}</van-tag>
        </div>
        <div class="project-title">
          {{title}}
        </div>
        <div class="customer">
          <img src="static/img/list/icon-list-daxue.png" alt="icon-list-daxue">&nbsp;{{customer}}
          <span style="margin: 0 4%;">·</span>
          <img src="static/img/list/icon-list-wenjian.png" alt="icon-list-wenjian">&nbsp;招标文件
        </div>
      </f7-card-content>
    </f7-card>
  </div>
</template>

<script>
import { Tag } from "vant"
export default {
  name: "qm-project-card",
  components: {
    [Tag.name]: Tag
  },
  props: {
    state: {
      type: Number,
      default: 0
    },
    states: {
      type: Array,
      default: () => [
        { text: "新建", color: "#3385FF" },
        { text: "待审核", color: "#FFA029" },
        { text: "实施中", color: "#05CD8A" },
        { text: "审核拒绝", color: "#FE5555" }
      ]
    },
    number: {
      type: String,
      default: "JG2011-11509"
    },
    date: {
      type: String,
      default: "2021/09/30"
    },
    title: {
      type: String,
      default: "广州市农村特殊教育学校项目施工监理建广州市农村特殊教育学校项目施工监理建"
    },
    customer: {
      type: String,
      default: "广州大学"
    }
  },
  data() {
    return {}
  },
  computed: {
    projectState() {
      let states = this.states;
      let state = this.state;
      return states[state] ? states[state] : states[0];
    },
    varStyle() {
      return ({
        "--main-color": this.projectState.color
      })
    }
  }
}
</script>

<style lang="less" scoped>
.project-wrapper {
  margin-bottom: calc(20px * var(--ratio));
  &:last-child {
    margin-bottom: 0;
  }

  .project-card {
    margin: 0;
    background: #FFFFFF;
    box-shadow: 0 calc(6px * var(--ratio)) calc(14px * var(--ratio)) 0 rgba(0, 0, 0, 0.05);
    border-radius: 0 0 calc(40px * var(--ratio)) 0;

    .project-card-content {
      padding: calc(20px * var(--ratio)) calc(20px * var(--ratio)) calc(32px * var(--ratio)) calc(32px * var(--ratio));

      .create-box {
        margin-bottom: calc(13px * var(--ratio));
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: calc(-32px * var(--ratio));
          display: block;
          width: calc(6px * var(--ratio));
          height: calc(50px * var(--ratio));
          background-color: var(--main-color);
        }

        .create-time {
          font-size: var(--font-size-subcontent-2);
          color: #8998AC;
        }

        .status {
          width: calc(120px * var(--ratio));
          height: calc(36px * var(--ratio));
          clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
          color: #fff;
          font-size: var(--font-size-subcontent-2);
          text-align: center;
          line-height: calc(36px * var(--ratio));
          background-color: var(--main-color);
        }
      }

      .project-processing {
        &::before {
          background-color: var(--color-fill-warning);
        }
        .status {
          background-color: var(--color-fill-warning);
        }
      }

      .project-going {
        &::before {
          background-color: var(--color-fill-win);
        }
        .status {
          background-color: var(--color-fill-win);
        }
      }

      .project-refuse {
        &::before {
          background-color: var(--color-fill-wrong);
        }
        .status {
          background-color: var(--color-fill-wrong);
        }
      }

      .project-number {
        margin-bottom: calc(20px * var(--ratio));
        line-height: calc(29px * var(--ratio));

        .van-tag {
          padding: calc(6px * var(--ratio)) calc(12px * var(--ratio));
        }
      }

      .project-title {
        margin-bottom: calc(16px * var(--ratio));
        color: #242424;
        font-size: var(--font-size-subtitle);
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .customer {
        display: flex;
        align-items: center;
        color: #61677A;
        font-size: var(--font-size-subcontent);
        line-height: var(--font-size-subcontent);

        img {
          width: calc(26px * var(--ratio));
        }
      }
    }
  }
}
</style>
